<template>
  <div class="uploadFile">
    <div class="demo-upload-mode" v-for="(item, index) in fileList" :key="index">
      <div class="demo-upload-list">
        <img :src="item.url">
        <div class="demo-upload-list-cover">
          <Icon type="ios-eye-outline" @click="onPreview(index)"></Icon>
          <Icon type="ios-trash-outline" @click="handleRemove(index)" v-if="!iShow"></Icon>
        </div>
      </div>
    </div>

    <Upload ref="upload" v-if="!iShow && (fileList.length < maxNum)" :show-upload-list="false"
      :data="upload.data" name="multipartFile" :headers="upload.headers"
      :on-success="handleSuccess" :format="['jpg','jpeg','png']" :max-size="2048" type="drag"
      :on-exceeded-size="handleMaxSize" :on-format-error="handleFormatError"
      :action="upload.reqUrl" style="display: inline-block;width:58px;">
      <div style="width: 58px;height:58px;line-height: 58px;">
        <Icon type="ios-camera" size="20"></Icon>
      </div>
    </Upload>
    <span class="imageSize"
      v-if="!iShow && (fileList.length > 0 ? false : true)">{{content}}</span>

    <preview-image ref="previewImage" :images="preview.images" :showDownLoad="true"
      :showIndex="preview.showIndex" />
  </div>
</template>

<script>
  import secret from '@/common/secret.js'
  import toolMgr from '@/biz/base/tool.js'
  export default {
    name: 'uploadFile',
    props: {
      maxNum: {
        type: Number,
        default: 100,
      },
      // 定义属性名
      name: {
        type: String,
        default: '',
      },
      content: {
        type: String,
        default: '建议尺寸 750*422 大小在1M内',
      },
    },
    data() {
      return {
        upload: toolMgr.unloadImage(),
        fileList: [],
        iShow: false, // 查看
        preview: {
          images: [],
          showIndex: 0
        },
      }
    },
    methods: {
      // 上传地址
      handleSuccess(res, file) {
        if (res.code == '200') {
          this.ImageContents = false
          let dataJson = secret.Decrypt(res.data)
          let params = {
            url: dataJson.imageURL,
            name: this.name || new Date().getTime(),
          }
          // 是否设置封面参数 是否封面(1:是 2:否)
          if (this.isCover) {
            params.isCover = 2
            this.fileList.push(params)
            // 第一次上传时候默认第一张是封面图
            if (this.fileList.length == 1) {
              this.fileList[0].isCover = 1
              this.coverMode = this.fileList[0].name
            }
          } else {
            this.fileList.push(params)
          }
          this.$emit('handleSuccess', this.fileList)
        } else {
          this.$Message.error('上传出错')
        }
      },
      handleMaxSize(file) {
        this.$Message.warning('单个图片不能超过2MB')
      },
      // 文件格式验证失败
      handleFormatError(file) {
        this.$Message.warning('图片格式只支持jpg,png格式！')
      },
      onPreview(index) {
        this.preview.images = this.fileList.map(i => (i.url))
        this.preview.showIndex = index
        this.$refs.previewImage.show()
      },
      // 移除图片
      handleRemove(index) {
        this.$Modal.confirm({
          title: '确认删除',
          content: `确认删除？`,
          okText: '确定',
          cancelText: '取消',
          onOk: () => {
            this.fileList.splice(index, 1)
            this.coverMode = ''
            this.$emit('handleSuccess', this.fileList)
          },
        })
      },
      init(v) {
        if (v == 'view') {
          this.iShow = true
        } else {
          this.iShow = false
        }
        console.log('获得 的iview:' + this.iShow, !this.iShow)
      },
    },
  }
</script>

<style lang="scss" scoped>
  // 上传
  .uploadFile {
    .demo-upload-mode {
      display: inline-block;
      text-align: center;
    }

    .demo-upload-list {
      width: 60px;
      height: 60px;
      text-align: center;
      line-height: 60px;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
      margin-right: 4px;
    }

    .demo-upload-list img {
      width: 100%;
      height: 100%;
    }

    .demo-upload-list-cover {
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.6);
    }

    .demo-upload-list:hover .demo-upload-list-cover {
      display: block;
    }

    .demo-upload-list-cover i {
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      margin: 0 2px;
    }

    ::v-deep .ivu-form-item-content {
      display: flex;
    }

    .imageSize {
      display: inline-block;
      margin-left: 16px;
      vertical-align: top;
      padding-top: 16px;
    }
  }
</style>